<template>
	<view class="yg">
		<!-- 搜索组件开始 -->
		<!-- 3. 使用 search 组件 -->
		<search></search>
		<!-- 搜索组件结束-->
		<!-- a.5 渲染轮播图界面开始 -->
		<view class="yg-swiper">
			<swiper indicator-color="true" indicator-dots="true" interval="3000" autoplay="true">
				<swiper-item v-for="(item,index) in swiperData" :key="item.goods_id">
					<navigator :url="'/pages/goods_detail/goods_detail?goods_id='+item.goods_id">
						<image :src="item.image_src"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<!-- 渲染轮播图界面结束 -->
		
	</view>
</template>

<script>
import search from "@/components/Search.vue"
import { request } from "@/request/request.js"
	export default {
		components: {
			"search": search
		},
		data() {
			return {
				swiperData:[]
			}
		},
		async created(){
			// 发请求获取轮播图数据
			let res = await request({
				url: "home/swiperdata"
			})
			console.log(res)
			this.swiperData = res.message
		},
		methods: {

		}
	}
</script>

<style lang="scss">
/* 	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
		color: #F0AD4E;
		font-size: 16px;
	} */
	.yg {
			.yg-swiper {
				height: 340rpx;
	
				swiper {
					height: 340rpx;
				}
	
				swiper-item {
					height: 340rpx;
	
					navigator {
						height: 340rpx;
					}
				}
			}
		}
</style>
